import React,{Component} from "react"
import $ from "jquery"
import Animate from 'rc-queue-anim'
import Answer from "./Answer.js"
export default class Comment extends Component {
	constructor(props){
		super(props)
		this.state={
			
		}
	}
	//这是点击展开回复评论输入框
	answer(event){
		let el=$(this.form)
		let off=$(el).attr("style")
		let username=this.props.username
		let commentusername=this.props.comment.commentUserName
		$(".jour-all").find("form").hide(200)
		if(off&&username!==commentusername){
			let input=$(el).find("input")
			$(el).slideDown(200)
			input.get(0).placeholder="回复"+this.props.comment.commentUserName+" :"
			input.focus()
		}
	}
	submitAnswer(val,name){
		this.props.answer(val,name,this.props.comment.commentContent)
	}
	label(){
		var input=$(this.form).find("input")
		var val=input.val()
		input.val(" ")
		$(this.form).slideUp(100)
		this.props.answer(val,this.props.comment.commentUserName,this.props.comment.commentContent)
	}
	//点击人名进行跳转到这个人的路由下
	otheruser(){
		let username=this.props.comment.commentUserName
		window.location="/user/"+username
	}
	render(){
		return (
			 <Animate    
                  type={["top"]}
                  duration={800}                             
                  interval={15}                              
                  ease={["easeOutElastic","easeOutBounce"]}  //进场是easeOutElastic这种缓动类型，出场是easeOutBounce这种缓动类型  网址：http://easings.net/zh-cn
                  appear={true}                              
                  component="div"                           
          >
             <p key={this.props.comment.commentUserName}><span style={{color:"blue",cursor:"pointer"}} onClick={(e)=>this.otheruser(e)}>{this.props.comment.commentUserName}</span>: <span onClick={this.answer.bind(this)} style={{cursor:"pointer"}}>{this.props.comment.commentContent}</span></p>
			<form 
				ref={(form)=>this.form=form}
				className="form-horizontal"
				style={{display:"none"}}
			>
				<div className="form-group">
					<div className="col-lg-10 col-md-10 col-sm-8 col-xs-8">
						<input type="text" className="form-control"/>
					</div>
					<label 
						style={{textAlign:"left",fontSize:"larger",color:"white",cursor:"pointer"}} 
						className="col-lg-2 col-md-2 col-sm-4 col-xs-4 control-label"
						onClick={this.label.bind(this)}
					>发送</label>
				</div>
			</form>
			{this.props.comment.answer?this.props.comment.answer.map((val,index)=>{
				if(!val) return ;
				return (< Answer submitAnswer={this.submitAnswer.bind(this)} answer={val} key={index} commentusername={this.props.comment.commentUserName}/>)
			}):""}
          </Animate>

		)
	}
}